import React, { useState, useEffect } from "react";
import axios from "axios";
import { Card, Row, List, Col, PageHeader } from "antd";
import _ from "lodash";

export default function NewsVistorList() {
  const [newsList, setNewsList] = useState([]);
  useEffect(() => {
    axios
      .get("http://localhost:5000/news?publishState=2&_expand=category")
      .then((res) => {
        // setNewsList(_.groupBy(res.data, (item) => item.category.title));
        setNewsList(
          Object.entries(_.groupBy(res.data, (item) => item.category.title)) //对象转为数组
        );
      });
  }, []);
  console.log(newsList);
  return (
    <div style={{ width: "95%", margin: "0 auto" }}>
      <PageHeader title="全球大新闻" subTitle="点击查看" />
      <Row gutter={[16, 16]}>
        {newsList.map((item) => {
          return (
            <Col span={8} key={item[0]}>
              <Card title={item[0]} bordered hoverable>
                <List
                  pagination={{ pageSize: 2 }}
                  size="large"
                  bordered
                  dataSource={item[1]}
                  renderItem={(data) => {
                    return (
                      <List.Item>
                        <a href={`#/detail/${data.id}`}>{data.title}</a>
                      </List.Item>
                    );
                  }}
                />
              </Card>
            </Col>
          );
        })}
      </Row>
    </div>
  );
}
